<template>
	<el-card>
		<!-- 搜索 -->
		<el-form :model="searchData" inline ref="searchFormRef" v-show="showSearch" id="searchForm"
			style="margin-bottom: 5px;">
			<el-form-item label="文本普通" prop="textPutong">
				<el-input v-model="searchData.textPutong" clearable placeholder=""></el-input>
			</el-form-item>
			<el-form-item label="状态开关" prop="stateSwitch">
				<el-select v-model="searchData.stateSwitch" placeholder="" clearable>
					<el-option v-for="dict in dict.type.dictShifou" :key="dict.value" :label="dict.label"
						:value="dict.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="选择单选" prop="selectOne">
				<el-select v-model="searchData.selectOne" placeholder="" clearable>
					<el-option v-for="dict in dict.type.dictUserState" :key="dict.value" :label="dict.label"
						:value="dict.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="选择多选" prop="selectMore">
				<el-select v-model="searchData.selectMore" placeholder="" multiple clearable>
					<el-option v-for="dict in dict.type.dictUserState" :key="dict.value" :label="dict.label"
						:value="dict.value" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button icon="Search" type="primary" @click="searchClick">搜索</el-button>
				<el-button icon="Refresh" @click="resetClick">重置</el-button>
			</el-form-item>
		</el-form>
		<el-row id="operate" style="margin-bottom: 3px;">
			<el-col :span="12">
				<el-button type="primary" plain icon="Plus" size="small" @click="addShowClick">新增</el-button>
				<el-button type="success" plain icon="Edit" size="small"
					:disabled="tableSelectData.selectIdList.length!=1"
					@click="editShowClick(tableSelectData.selectData)">修改</el-button>
				<el-button type="danger" plain icon="Delete" size="small"
					:disabled="!tableSelectData.selectIdList.length"
					@click="deleteClick(tableSelectData.selectIdList)">删除</el-button>
				<el-button type="info" plain icon="Upload" size="small" @click="importDataClick">导入</el-button>
				<el-button type="warning" plain icon="Download" size="small" @click="exportDataClick">导出</el-button>
			</el-col>
			<el-col :span="12">
				<right-toolbar :columns="columns" :search="true" v-model:showSearch="showSearch"
					@refresh="searchClick"></right-toolbar>
			</el-col>
		</el-row>
		<!-- 表格 -->
		<gz-table ref="tableRef" :searchData="searchData" name="app_tmpl" :columns="columns" api="appTmplFindAllByPage"
			@selection-change="selectionChange">
			<template #chacao>
				<el-table-column label="插槽" width="120px" align="center">
					<template v-slot="scope">
						插槽自定义内容
					</template>
				</el-table-column>
			</template>

			<el-table-column label="操作" fixed="right" width="160px" align="center">
				<template v-slot="scope">
					<el-button type="text" icon="Edit" @click="editShowClick(scope.row)">修改</el-button>
					<el-button type="text" icon="Delete" @click="deleteClick(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</gz-table>

		<!-- 添加/编辑 -->
		<gz-dialog @confirm="confirmClick" width="800px" ref="gzDialogRef" title="添加/修改">
			<el-form :model="curData" ref="curFormRef" label-width="100px" :show-message="false"
				style="padding-right: 20px;">
				<el-row>
					<el-col :span="12">
						<el-form-item label="文本普通" prop="textPutong" required>
							<el-input v-model="curData.textPutong" clearable placeholder=""></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="文本复制" prop="textCopy" required>
							<el-input v-model="curData.textCopy" clearable placeholder=""></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="文本长文" prop="textLong" required>
							<el-input v-model="curData.textLong" type="textarea" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="文本JSON" prop="textJson" required>
							<el-input v-model="curData.textJson" type="textarea" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="选择单选" prop="selectOne" required>
							<el-select v-model="curData.selectOne">
								<el-option v-for="dict in dict.type.dictUserState" :key="dict.value" :label="dict.label"
									:value="dict.value"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="选择多选" prop="selectMore" required>
							<el-select v-model="curData.selectMore" multiple>
								<el-option v-for="dict in dict.type.dictUserState" :key="dict.value" :label="dict.label"
									:value="dict.value"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="12">
						<el-form-item label="状态开关" prop="stateSwitch" required>
							<el-switch v-model="curData.stateSwitch"></el-switch>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="12">
						<el-form-item label="文件单个" prop="fileUrl" required>
							<gz-upload rootPath="app/appTmpl/file" accept="*" v-model="curData.fileUrl"></gz-upload>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="文件多个" prop="fileUrls" required>
							<gz-upload rootPath="app/appTmpl/fileUrls" accept="*" :limit="9"
								v-model="curData.fileUrls"></gz-upload>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-form-item label="富文本" prop="fuwenben" required>
						<gz-editor v-model="curData.fuwenben" rootPath="code/tmpl/fuwenben" :height="maxHeight"></gz-editor>
					</el-form-item>
				</el-row>
			</el-form>
		</gz-dialog>

		<gz-import ref="gzImport" fileName="格子模板.xlsx" api="appTmplImportData"
			apiTemplate="appTmplImportTemplate"></gz-import>
	</el-card>
</template>

<script>
	export default {
		name: "appTmpl",
		components: {},
		dicts: ['dictShifou', 'dictUserState'],
		data() {
			return {
				showSearch: true,
				tableSelectData: {
					selectData: {},
					selectList: [],
					selectIdList: []
				},
				//表格数据
				searchData: {},
				curData: {},
				columns: [{
						type: "selection",
						width: 55,
						fixed: 'left'
					},
					{
						label: "文本普通",
						prop: "textPutong",
						isShow: true,
						isSort: true,
						width: 100
					},
					{
						label: "文本长文",
						prop: "textLong",
						type: "longText",
						isShow: true,
					},
					{
						label: "插槽",
						prop: "chacao",
						isShow: true,
					},
					{
						label: "文本JSON",
						prop: "textJson",
						type: "json",
						isShow: true,
					},
					{
						label: "文本复制",
						prop: "textCopy",
						type: "copy",
						isShow: true,
					},
					{
						label: "文件单个",
						prop: "fileUrl",
						type: "file",
						width: 100,
						style: {
							height: "40px",
							width: "40px"
						},
						isShow: true,
					},
					{
						label: "文件多个",
						prop: "fileUrls",
						type: "file",
						width: 100,
						style: {
							height: "40px",
							width: "40px"
						},
						isShow: true,
					},
					{
						label: "状态开关",
						prop: "stateSwitch",
						type: "switch",
						isShow: true,
					},
					{
						label: "选择单选",
						prop: "selectOne",
						type: "tag",
						options: () => {
							return this.dict.type.dictUserState
						},
						isShow: true,
						isSort: true,
					},
					{
						label: "选择多选",
						prop: "selectMore",
						type: "tag",
						width: 120,
						options: () => {
							return this.dict.type.dictUserState
						},
						isShow: true,
						isFilter: true,
					},
					{
						label: "富文本",
						prop: "fuwenben",
						type: "fuwenben",
						isShow: true,
					},
				],
			};
		},
		mounted() {
			this.$nextTick(() => {
				this.searchClick()
			})
		},
		methods: {
			//搜索按钮
			searchClick() {
				this.$refs.tableRef.shuaxin(this.searchData)
			},
			//重置按钮
			resetClick() {
				this.$refs.searchFormRef.resetFields();
				this.$refs.tableRef.clearFilter();
				this.searchClick()
			},
			//添加展示
			addShowClick() {
				this.curData = {}
				this.$refs.gzDialogRef.open()
			},
			//修改展示
			editShowClick(row) {
				let data = JSON.parse(JSON.stringify(row))
				data.selectMore = data.selectMore.split(",")
				this.curData = data
				this.$refs.gzDialogRef.open()
			},
			//添加/修改提交
			confirmClick() {
				let data = JSON.parse(JSON.stringify(this.curData))
				this.$refs.curFormRef.validate(async (valid) => {
					if (valid) {
						data.selectMore = data.selectMore.join(",")
						if (this.$common.isBlank(data.id)) {
							await this.$api.appTmplAdd(data)
						} else {
							await this.$api.appTmplEdit(data);
						}
						this.$refs.gzDialogRef.close()
						this.searchClick()
					}
				});
			},
			//删除
			deleteClick(ids) {
				this.$common.msgBoxDel(() => {
					this.$api.appTmplDelById(ids).then(res => {
						this.searchClick();
					});
				})
			},
			importDataClick() {
				this.$refs.gzImport.open()
			},
			exportDataClick() {
				this.searchData.fileName = "格子模板.xlsx"
				this.$api.appTmplExportData(this.searchData)
			},
			// 多选框选中数据
			selectionChange(val) {
				this.tableSelectData.selectData = val ? val[0] : {}
				this.tableSelectData.selectList = val
				this.tableSelectData.selectIdList = val.map(item => item.id)
			},
		},
	};
</script>

<style lang="scss" scoped>
	:deep(.el-card__body) {
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.el-form-item {
		padding-bottom: 0px;
		margin-bottom: 9px;
	}
</style>